// import React, { Component, useState } from 'react';
// import { Row, Col, Card, Button, Modal, Popconfirm, Form, Table } from 'antd';
// import './index.less';
// import { EyeOutlined, EditOutlined, DeleteOutlined } from '@ant-design/icons';

// const caseOptimization: React.FC = () => {
//     return (
//         <div className="caseOptimization">
//             <div className="dataSource">
//                 <h3>案例优化</h3>
//             </div>
//         </div>
//     );
// };

// export default caseOptimization;
import React, { useState } from 'react';
import {
    Row,
    Col,
    Card,
    Button,
    Modal,
    Popconfirm,
    Form,
    Table,
    Tag,
    Input,
    Select,
    Space,
    Progress
} from 'antd';
import {
    EyeOutlined,
    EditOutlined,
    DeleteOutlined,
    PlusOutlined,
    SearchOutlined
} from '@ant-design/icons';
import './index.less';

const { Option } = Select;
const { TextArea } = Input;

interface CaseItem {
    id: string;
    name: string;
    status: 'processing' | 'success' | 'error';
    optimizationResult: number;
    createTime: string;
}

const CaseOptimization: React.FC = () => {
    const [form] = Form.useForm();
    const [visible, setVisible] = useState(false);
    const [currentCase, setCurrentCase] = useState<CaseItem | null>(null);
    const [dataSource, setDataSource] = useState<CaseItem[]>([
        {
            id: '1',
            name: '用户增长策略优化',
            status: 'success',
            optimizationResult: 35,
            createTime: '2024-03-15'
        },
        {
            id: '2',
            name: '支付流程转化优化',
            status: 'processing',
            optimizationResult: 12,
            createTime: '2024-03-16'
        },
        {
            id: '2',
            name: '支付流程转化优化',
            status: 'processing',
            optimizationResult: 50,
            createTime: '2024-03-16'
        }
    ]);

    const columns = [
        {
            title: '案例名称',
            dataIndex: 'name',
            key: 'name',
        },
        {
            title: '优化进度',
            dataIndex: 'optimizationResult',
            key: 'optimizationResult',
            render: (percent: number) => (
                <Progress percent={percent} status="active" />
            ),
        },
        {
            title: '状态',
            dataIndex: 'status',
            key: 'status',
            render: (status: CaseItem['status']) => {
                const statusMap = {
                    processing: { color: 'blue', text: '进行中' },
                    success: { color: 'green', text: '已完成' },
                    error: { color: 'red', text: '异常' }
                };
                return <Tag color={statusMap[status].color}>{statusMap[status].text}</Tag>;
            },
        },
        {
            title: '创建时间',
            dataIndex: 'createTime',
            key: 'createTime',
        },
        {
            title: '操作',
            key: 'action',
            render: (_: any, record: CaseItem) => (
                <div className="action-buttons">
                    <Button
                        size="small"
                        type="link"
                        icon={<EyeOutlined />}
                        onClick={() => handleView(record)}
                    />
                    <Button
                        size="small"
                        type="link"
                        icon={<EditOutlined />}
                        onClick={() => handleEdit(record)}
                    />
                    <Popconfirm
                        title="确认删除该案例吗？"
                        onConfirm={() => handleDelete(record.id)}
                    >
                        <Button size="small" type="link" danger icon={<DeleteOutlined />} />
                    </Popconfirm>
                </div>
            ),
        },
    ];

    const handleAdd = () => {
        setCurrentCase(null);
        setVisible(true);
    };

    const handleEdit = (record: CaseItem) => {
        setCurrentCase(record);
        form.setFieldsValue(record);
        setVisible(true);
    };

    const handleView = (record: CaseItem) => {
        Modal.info({
            title: '案例详情',
            content: (
                <div>
                    <p>案例名称: {record.name}</p>
                    <p>创建时间: {record.createTime}</p>
                    <p>优化进度: {record.optimizationResult}%</p>
                </div>
            )
        });
    };

    const handleDelete = (id: string) => {
        setDataSource(dataSource.filter(item => item.id !== id));
    };

    const handleSubmit = (values: any) => {
        if (currentCase) {
            setDataSource(dataSource.map(item =>
                item.id === currentCase.id ? { ...item, ...values } : item
            ));
        } else {
            setDataSource([...dataSource, {
                ...values,
                id: String(dataSource.length + 1),
                createTime: new Date().toISOString().split('T')[0]
            }]);
        }
        setVisible(false);
        form.resetFields();
    };

    return (
        <div className="caseOptimization">
            <div className="dataSource">
                <h2>案例优化</h2>
                {/* 顶部操作栏 */}
                <div>
                    <Input.Search
                        placeholder="搜索案例名称"
                        prefix={<SearchOutlined />}
                        style={{ width: 300, marginRight: 16 }}
                    // onChange={(e: { target: { value: React.SetStateAction<string>; }; }) => setSearchText(e.target.value)}
                    />

                    <Space style={{ float: 'right' }}>
                        <Button
                            type="primary"
                            icon={<PlusOutlined />}
                            onClick={handleAdd}
                        >
                            新建案例
                        </Button>
                    </Space>
                </div>

                {/* 主要内容区域 */}
                <div style={{ margin: '20px 0' }}>
                    <Table
                        dataSource={dataSource}
                        columns={columns}
                        scroll={{ y: 600 }}
                        rowKey="id"
                        pagination={{ pageSize: 5 }}
                    />
                </div>

                <Modal
                    title={currentCase ? '编辑案例' : '新建案例'}
                    visible={visible}
                    onCancel={() => setVisible(false)}
                    onOk={() => form.submit()}
                >
                    <Form
                        form={form}
                        layout="vertical"
                        onFinish={handleSubmit}
                    >
                        <Form.Item
                            label="案例名称"
                            name="name"
                            rules={[{ required: true, message: '请输入案例名称' }]}
                        >
                            <Input placeholder="请输入案例名称" />
                        </Form.Item>

                        <Form.Item
                            label="优化目标"
                            name="optimizationResult"
                            rules={[{ required: true, message: '请选择优化目标' }]}
                        >
                            <Select placeholder="请选择优化目标">
                                <Option value={10}>提升转化率</Option>
                                <Option value={20}>降低跳出率</Option>
                                <Option value={30}>提高用户留存</Option>
                            </Select>
                        </Form.Item>

                        <Form.Item
                            label="案例描述"
                            name="description"
                        >
                            <TextArea rows={4} placeholder="请输入案例描述" />
                        </Form.Item>
                    </Form>
                </Modal>
            </div>
        </div>
    );
};

export default CaseOptimization;